<template>
    <div>
        <!--   <div style="margin-top: 1%">
             <el-breadcrumb separator="/">
               <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
               <el-breadcrumb-item>活动列表</el-breadcrumb-item>
               <el-breadcrumb-item>活动详情</el-breadcrumb-item>
             </el-breadcrumb>
           </div>-->
        <!--搜索区域-->
        <div>
            <el-form :inline="true" :model="formInline">
                <el-form-item label="制单人">
                    <el-input v-model="formInline.user" placeholder="制单人"></el-input>
                </el-form-item>
                <el-form-item label="档案状态"  prop="type">
                    <el-select v-model="form.region" placeholder="请选择档案状态">
                        <el-option label="使用中" value="shanghai"></el-option>
                        <el-option label="停用中" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handelAdd">添加</el-button>
                </el-form-item>
            </el-form>

            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column v-for="item in tableColumn "
                                 :prop="item.prop"
                                 :label="item.label"
                                 :width="item.width">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="150">
                    <template slot-scope="scope">
                        <el-button @click="handleChangeStatus(scope.row)" type="text" size="small">查看</el-button>
                        <el-button type="text" size="small"@click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!--分页-->
            <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-size="pageSize"
                    layout="total, prev, pager, next"
                    :total="tableData.length">
            </el-pagination>

            <!--添加-->
            <el-dialog title="收货地址" :visible.sync="showAddDialog">
                <el-form :model="form" :rules="rules" ref="ruleform" label-width="80px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="商品名"  prop="pingpai">
                                <el-input v-model="form.pingpai" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="品牌"  prop="spm">
                                <el-input v-model="form.spm" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="sku代码"  prop="skudm">
                                <el-input  type="number" v-model="form.skudm" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="规格"  prop="guige">
                                <el-input v-model="form.guige" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="类目"  prop="leimu">
                                <el-input v-model="form.leimu" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="单位"  prop="danwei">
                                <el-input v-model="form.danwei" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="产品属性"  prop="cpsx">
                                <el-input v-model="form.cpsx" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="标准价"  prop="bzj">
                                <el-input v-model="form.bzj" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="标准折扣"  prop="bzzk">
                                <el-input v-model="form.bzzk" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="showAddDialog = false">取 消</el-button>
                    <el-button type="primary" @click="handleConfine">确 定</el-button>
                </div>
            </el-dialog>
        </div>

    </div>
</template>

<script>
  import { mapActions ,mapMutations} from 'vuex';
  export default {
    name: 'index',
    data() {
      return {
        activeIndex: 1,
        currentPage: 1,
        pageSize: 10,
        formInline: {
          user: '',
          region: '',

        },
        tableColumn: [
         {
            prop: 'addtime',
            label: '日期',
          }, {
            prop: 'djbh',
            label: '单据编号',
          }, {
            prop: 'shbz',
            label: '审核标志',
          }, {
            prop: 'gbbz',
            label: '关闭标志',
          }, {
            prop: 'sybm',
            label: '使用部门',
          }, {
            prop: 'jhddh',
            label: '计划订单号',
          },{
            prop: 'wlzdm',
            label: '物料长代码',
          },{
            prop: 'wlmc',
            label: '物料名称',
          },{
            prop: 'suliang',
            label: '数量',
          },{
            prop: 'dhrq',
            label: '到货日期',
          },{
            prop: 'gysmc',
            label: '供应商名称',
          },{
            prop: 'jycgrq',
            label: '建议采购日期',
          },{
            prop: 'hsl',
            label: '换算率',
          }
        ],
        tableData: [
          {
            id:1,
            addtime: '2020-10-23',
            djbh: '43434343',
            shbz: 0,
            gbbz: 1,
            sybm: '销售部',
            jhddh: '45545445',
            wlzdm: '45545454',
            wlmc: '面辅料电脑',
            suliang: '77',
            dhrq: '2020-12-14',
            gysmc: '北京lGONS',
            jycgrq: '2020-12-10',
            hsl: '0.3',
          },   {
            id:1,
            addtime: '2020-10-23',
            djbh: '43434343',
            shbz: 0,
            gbbz: 1,
            sybm: '销售部',
            jhddh: '45545445',
            wlzdm: '45545454',
            wlmc: '面辅料电脑',
            suliang: '77',
            dhrq: '2020-12-14',
            gysmc: '北京lGONS',
            jycgrq: '2020-12-10',
            hsl: '0.3',
          },   {
            id:1,
            addtime: '2020-10-23',
            djbh: '43434343',
            shbz: 0,
            gbbz: 1,
            sybm: '销售部',
            jhddh: '45545445',
            wlzdm: '45545454',
            wlmc: '面辅料电脑',
            suliang: '77',
            dhrq: '2020-12-14',
            gysmc: '北京lGONS',
            jycgrq: '2020-12-10',
            hsl: '0.3',
          },
        ],
        tableData2: this.$store.getters.skuDatas,
        showAddDialog: false,
        dialogFormVisible: false,
        form: {
          id: 1,
          pingpai: '',
          spm: '',
          skudm: '',
          guige: '',
          leimu: '',
          danwei: '',
          cpsx: '',
          bzj: '',
          bzzk: '',
          jdrq: new Date(),
          jdzt: '使用中',
        },
        rules: {
          pingpai: [
            { required: true, message: '请输入商品名', trigger: 'blur' },
          ], spm: [
            { required: true, message: '请输入品牌', trigger: 'blur' },
          ], skudm: [
            { required: true, message: '请输入sku代码', trigger: 'blur' },
          ], guige: [
            { required: true, message: '请输入规格', trigger: 'blur' },
          ], leimu: [
            { required: true, message: '请输入类目', trigger: 'blur' },
          ], danwei: [
            { required: true, message: '请输入单位', trigger: 'blur' },
          ], cpsx: [
            { required: true, message: '请输入产品属性', trigger: 'blur' },
          ], bzj: [
            { required: true, message: '请输入标准价', trigger: 'blur' },
          ],

        }
      };
    }
    ,
    mounted() {
      console.log(this.$store.getters.skuDatas);
      console.log(this.$store.getters.cangkuDatas);
      // this.tableData  = this.$store.getters.skuDatas;
    },
    methods: {
      handleCurrentChange(val) {
        this.currentPage = val;
      },
      ...mapMutations('user', ['addSkuDatas', 'updateSkuDatas','deleteSkuDatas']),
      //确认添加
      handleConfine() {
        var validate = false;
        this.$refs['ruleform'].validate((valid) => {
          if (valid) {
            validate = true;
          } else {
            console.log('error submit!!');
            validate = false;
            return false;
          }
        });
        if (validate === false) {
          return;
        }
        setTimeout(()=>{
          this.form.id = Math.ceil(Math.random()*100);
          // this.tableData.push(this.form);
          // this.$store.commit('addSkuDatas',this.form)
          this.addSkuDatas(this.form)
          this.tableData  = this.$store.getters.skuDatas;

        },2000)
        this.showAddDialog = false;
        this.$message.success("添加成功!");

      },
      handleDelete(row){
        this.$confirm('是否确定删除', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          this.deleteSkuDatas(row.id)
        }).catch(() => {
        });
      },
      //确认订单状态
      handleChangeStatus(row){
        this.updateSkuDatas(row.id)
      },
      handelAdd(){
        this.showAddDialog = true;
      }
    },
  };
</script>

<style scoped>

</style>
